<template>
  <div>
    <!-- 
    <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>
    -->
    <!-- 这里是一个em的布局参考，防止他乱了 -- -->

    <el-container>
      <el-header class="top">
        <!-- 这里是头部 ，让头部置顶-->
        <div>
          <img src="../assets/1.png" width="50px" />
          <span>闲物</span>

          <div>
            <!-- <el-input placeholder="请输入商品名称" class="ce" suffix-icon="el-icon-search"></el-input> -->
            <!-- 这个搜索先砍了 -->
          </div>
        </div>
      </el-header>

      <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px"  class="top" >
          <!-- 左边面板应用一下top置顶方法，然后再自己设置自己的参数，长度这里只能写死200-->
          <el-menu unique-opened :default-active="$route.path">
            <template>
              <!-- 拉下来代码合并差异性大的话全部手动合并，自动合并吞代码，发现不要在这里 -->
              <el-menu-item    index="1" class="i1" @click.native="goTo('/')" >
                <i class="el-icon-s-home"></i> 发现
              </el-menu-item>
              <el-menu-item  index="2" class="i2" @click.native="goTo('/PingTai')" >
                <i class="el-icon-circle-plus"></i> 发布
              </el-menu-item>
              <!-- 不要官网的通知，砍了了 -->
              <el-menu-item    index="3" class="i3" @click.native="goTo('/Center')" >
                <i class="el-icon-user-solid"></i> 个人中心
              </el-menu-item>
            </template>
            <el-button type="danger" v-if="!islogin" round class="dl" @click="showLoginPage" >登录</el-button>
            <!-- 这个按钮，登录了就别给他显示了 -->
            <el-button v-if="islogin" @click="esclogin">退出登录</el-button>
          </el-menu>
          <p></p>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- <ContentDetails></ContentDetails> -->
    <Login ref="goshowLoginPage">
      <!-- 登陆界面 -->
    </Login>
  </div>
</template>

<script>
import Login from "./Login.vue";
export default {
  data() {
    return {
      islogin:false,
    };
  },
  created(){
   
  },
  mounted() {


    if(sessionStorage.getItem("seg")){
      console.log("seg有")
      this.islogin = false
    }else{
      console.log("seg没有")
      this.islogin = true
    }


    const element = document.getElementById("el-menu-item");
    if (element) {
      // 现在可以安全地访问和修改元素了
      element.setAttribute("aria-hidden", true);
    }
  },
  methods: {

   async esclogin(){
    console.log(0)
      this.islogin = false;
      let res = await this.$http.post("login", {
          username: "morenyonhu",
          password: "morenyonhu"
        });
        sessionStorage.removeItem("seg")
        sessionStorage.setItem("token", res.data.token);
        console.log(res)
    },
    // 登录 用于显示登录界面 调用子组件的方法更新变量
    showLoginPage() {
      this.$refs.goshowLoginPage.changLoginStatus();
    },
    goTo(Center) {
      if(Center == this.$route.path) return false;
      // 如果当前传入跳转的路由还是等于现在的路由，那么就不给他跳转
            this.$router.push(Center);
    },


    // 这个发现需要一个单独的方法去..
    tologin() {
      // Login
      this.$refs.login.show();
    }
  },
  components: {
    // Login
    Login
  }
};
// 手动
</script>

<style lang="less" scoped>
.top { //单独的置顶方法,可以公用
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  // 相对与这个窗口置顶
}
// ----------------  CSS 头部跟左边置顶让中间的滚   动
.el-header {
  background: #ffffff;
  width: 100%;
  // box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  // 这里长度给他设满100,然后给他一个阴影有层次感，设不设置无所吊慰
  height: 60px;
  color: #000000;
  span {
    margin-left: 15px;
  }
}
.el-aside {
// 这里是左边的面板，左边面板
  background-color: #fdfdfd;
  // height: 945px;  这个的面板高度去写死他干什么  😒😒
  height: 100%;//高度拉满
  top: 60px;
  // 左边面板的top值相对头部的高度


  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #ffffff;
  // 上 右  下 左
  margin: 70px 0px 200px 200px;
  // 左边给一个边距就行
}
// ----------------

.ce {
  position: absolute;
  left: 30%;
  right: 50%;
  top: 2%;
  width: 500px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #000000;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.bot {
  font-size: 25px;
  position: fixed;
  left: 30px;
  bottom: 0;
}
.dl {
  position: absolute;
  left: 7%;
  width: 130px;
}
.el-menu-item:hover {
  background: none;
}
.el-menu-item:focus {
  background: none;
  color: rgb(244, 175, 26);
  // color: rgb(255, 174, 0);
}
</style>
